//如果不想每次编辑后都要打包文件 webpack
//这个配置文件，其实就是一个js文件，通过 Node 中的模块操作 ，向外暴露了一个 配置对象
var path = require('path')
//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle 注入到页面底部
//如果要配置插件，需要在导出的对象中，挂载一个  plugins 几点
var htmlWebpackPlugin = require('html-webpack-plugin') //设置热更新后，内存中 会默认  /bundle.js ，index.html是硬盘中的，所以我们要把页面也存放在内存中

module.exports = {
  //在配置文件中，需要手动指定入口文件，出口文件
  entry: path.join(__dirname, './src/main.js') ,               //入口文件
  output:{//指定输出选项
    path : path.join(__dirname, './dist/') ,               //输出路径
    filename:'bundle.js'                                  //指定输出文件的名字
  },
  plugins:[//所有webpack 插件的配置节点
    new htmlWebpackPlugin({
      template : path.join(__dirname,'./src/index.html'),//指定模板文件路径
      filename:'index.html'//设置生成的内存页面的名称
    })
  ],
  module:{
    //配置所有第三方loader模块
    rules: [
      {test: /\.css$/, use:['style-loader','css-loader']},                //处理css文件的loader(需要安装style-loader,css-loader),（main.js引入）
      // {test: /\.less$/, use:['style-loader','css-loader','less-loader']},          //处理less文件的 loader
      // {test: /\.scss$/, use:['style-loader','css-loader','sass-loader']},          //处理 scss文件的 loader
      {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=100&name=[hash:8]-[name].[ext]'} ,    //处理图片路径的loader ，url 内部依赖file-loader
      //background中url默认图片base64编码的字符串， 但是一些大图片我们不希望它转成base64格式的编码
      //limit的值是图片的大小（单位：byte），当我们引入的图片大于或等于  limit ，将不会转成base64格式字符串， 小于等于则转成base64格式字符串
      {test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},                   //这是处理字体的loader
      { test :/\.js$/, use: 'babel-loader' ,exclude:/node_modules/},              //配置 Babel 来转换高级的ES语法
      {test: /\.vue$/, use: 'vue-loader'}                                         //配置 vue 文件的 loader
    ]
  },
  resolve: {
    alias: { //设置Vue 被导入时候的包的路径
      // "vue$":"vue/dist/vue.js"
    }
  }
}
